<template>
  <div>
    <a-form layout="inline" style="margin-bottom: 20px">
      <a-form-item label="统计范围">
        <a-select v-model="filterParams.campus" default-value="all" @change="handleFilterChange">
          <a-select-option value="all">全校</a-select-option>
          <a-select-option value="campus1">东校区</a-select-option>
          <a-select-option value="campus2">西校区</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item label="教学楼">
        <a-select v-model="filterParams.building" default-value="all" @change="handleFilterChange">
          <a-select-option value="all">全部</a-select-option>
          <a-select-option value="A">A楼</a-select-option>
          <a-select-option value="B">B楼</a-select-option>
          <a-select-option value="C">C楼</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item>
        <a-button type="primary" @click="handleSearch">统计</a-button>
        <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
      </a-form-item>
    </a-form>
    
    <a-table 
      :columns="columns" 
      :dataSource="filteredData" 
      :pagination="pagination"
      bordered
    >
      <template slot="rate" slot-scope="text, record">
        <a-progress 
          :percent="record.rate" 
          :status="record.rate > 80 ? 'success' : record.rate < 30 ? 'exception' : 'normal'" 
        />
      </template>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '教室编号',
    dataIndex: 'classroom',
    key: 'classroom',
    sorter: (a, b) => a.classroom.localeCompare(b.classroom)
  },
  {
    title: '教学楼',
    dataIndex: 'building',
    key: 'building',
    filters: [
      { text: 'A楼', value: 'A' },
      { text: 'B楼', value: 'B' },
      { text: 'C楼', value: 'C' }
    ],
    onFilter: (value, record) => record.building.includes(value)
  },
  {
    title: '校区',
    dataIndex: 'campus',
    key: 'campus',
    filters: [
      { text: '东校区', value: '东校区' },
      { text: '西校区', value: '西校区' }
    ],
    onFilter: (value, record) => record.campus.includes(value)
  },
  {
    title: '容量',
    dataIndex: 'capacity',
    key: 'capacity',
    sorter: (a, b) => a.capacity - b.capacity
  },
  {
    title: '使用率',
    dataIndex: 'rate',
    key: 'rate',
    scopedSlots: { customRender: 'rate' },
    sorter: (a, b) => a.rate - b.rate
  }
]

const rawData = [
  {
    key: '1',
    classroom: 'bj007',
    building: 'A楼',
    campus: '东校区',
    capacity: 60,
    rate: 85
  },
  {
    key: '2',
    classroom: 'bj011',
    building: 'B楼',
    campus: '西校区',
    capacity: 120,
    rate: 45
  },
  {
    key: '3',
    classroom: 'bj012',
    building: 'C楼',
    campus: '东校区',
    capacity: 80,
    rate: 25
  },
  {
    key: '4',
    classroom: 'bj002',
    building: 'A楼',
    campus: '东校区',
    capacity: 90,
    rate: 60
  },
  {
    key: '5',
    classroom: 'jb006',
    building: 'B楼',
    campus: '西校区',
    capacity: 70,
    rate: 35
  }
]

export default {
  data() {
    return {
      columns,
      rawData,
      filteredData: [],
      filterParams: {
        campus: 'all',
        building: 'all'
      },
      pagination: {
        pageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: total => `共 ${total} 条数据`
      }
    }
  },
  created() {
    this.filteredData = [...this.rawData]
  },
  methods: {
    handleFilterChange() {
      this.filterData()
    },
    handleSearch() {
      this.filterData()
    },
    handleReset() {
      this.filterParams = {
        campus: 'all',
        building: 'all'
      }
      this.filteredData = [...this.rawData]
    },
    filterData() {
      this.filteredData = this.rawData.filter(item => {
        const campusMatch = this.filterParams.campus === 'all' || 
                          (this.filterParams.campus === 'campus1' && item.campus === '东校区') ||
                          (this.filterParams.campus === 'campus2' && item.campus === '西校区')
        
        const buildingMatch = this.filterParams.building === 'all' || 
                            item.building.includes(this.filterParams.building)
        
        return campusMatch && buildingMatch
      })
    }
  }
}
</script>

<style scoped>
.ant-progress {
  margin-bottom: 0;
}
</style>